<template>
  <div class="dag-container">
    <div :class="['dag-node', status]">
      <div class="dag-main">
        <span class="require">
          <i v-if="isMandatory === 0"> * </i>
        </span>
        <span class="label">{{ label }}</span>
      </div>
      <span class="status">
        <img v-show="status === 'success'" :src="image.success">
        <img v-show="status === 'failed'" :src="image.failed">
        <img v-show="status === 'running' " :src="image.running">
        <img v-show="status === 'cancel' " :src="image.cancel">
      </span>
    </div>
    <div v-if="showDeleteButton" class="operation-drawer">
      <div class="delete" @click="deleteNode">
        <i class="icon el-icon-circle-close" />
        <span>删除节点</span>
      </div>
    </div>
    <div v-if="showTime" class="time"><i class="icon el-icon-time" /><span class="time-text">耗时：{{ timeConsuming | timeFilter }}</span></div>
  </div>
</template>

<script>
const image = {
  success:
    '',
  failed:
    '',
  running:
    '',
  cancel: ''
}

export default {
  inject: ['getGraph', 'getNode'],
  data: () => ({
    image,
    id: '',
    complete: false,
    label: '',
    isMandatory: 0, // 0必选 1非必选
    componentState: 0,
    timeConsuming: 0, // 组件耗时
    showTime: false,
    showDeleteButton: false
  }),
  computed: {
    status() {
      return this.componentState === 1 ? 'success' : this.componentState === 3 ? 'failed' : this.componentState === 2 ? 'running' : this.componentState === 4 ? 'cancel' : 'default'
    }
  },
  mounted() {
    const node = this.getNode()
    const { data } = node
    const { componentName = '', complete = '', isMandatory, componentState = 0, timeConsuming = 0, showTime } = data
    this.label = componentName
    this.complete = complete
    this.isMandatory = isMandatory
    this.componentState = componentState
    this.timeConsuming = timeConsuming
    this.showTime = showTime
    // 监听数据改变事件
    node.on('change:data', ({ current }) => {
      const { componentName, complete = false, isMandatory, componentState = 0, timeConsuming = 0, showTime, showDeleteButton } = current
      this.label = componentName
      this.complete = complete
      this.isMandatory = isMandatory
      this.componentState = componentState
      this.timeConsuming = timeConsuming
      this.showTime = showTime
      this.showDeleteButton = showDeleteButton
    })
  },
  methods: {
    deleteNode() {
      const node = this.getNode()
      window.graph.removeNode(node)
    }
  }

}
</script>

<style lang="scss" scoped>
.dag-container {
  height: 100%;
  position: relative;
}
.operation-drawer{
  position: absolute;
  right: -60px;
  top: 23px;
  background: #fff;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.06);
  .icon{
    color: #F56C6C;
    margin-right: 5px;
  }
}
.dag-node {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 0 0 0 10px;
  background-color: #fff;
  border: 1px solid #c2c8d5;
  border-left: 4px solid #5F95FF;
  border-radius: 4px;
  box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
  align-items: center;
}
.dag-main{
  width: calc(100% - 25px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.dag-node img {
  width: 15px;
  height: 15px;
  margin-top: 3px;
  flex-shrink: 0;
  vertical-align: middle;
}
.dag-node .status img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 0;
  vertical-align: middle;
}
.dag-node .label {
  display: inline-block;
  width: 100%;
  height: 20px;
  font-size: 14px;
  line-height: 20px;
  vertical-align: middle;
  text-align: center;
}
.dag-node .status {
  flex-shrink: 0;
}
.dag-node.success {
  border-left: 4px solid #52c41a;
}
.dag-node.failed {
  border-left: 4px solid #ff4d4f;
}
.dag-node.running .status img {
  animation: spin 1s linear infinite;
}
.x6-node-selected .dag-node {
  border-color: #1890ff;
  border-radius: 2px;
  box-shadow: 0 0 0 4px #d4e8fe;
}
.x6-node-selected .dag-node.success {
  border-color: #52c41a;
  border-radius: 2px;
  box-shadow: 0 0 0 4px #ccecc0;
}
.x6-node-selected .dag-node.failed {
  border-color: #ff4d4f;
  border-radius: 2px;
  box-shadow: 0 0 0 4px #fedcdc;
}
.x6-edge:hover path:nth-child(2){
  stroke: #1890ff;
  stroke-width: 1px;
}

.x6-edge-selected path:nth-child(2){
  stroke: #1890ff;
  stroke-width: 1.5px !important;
}
.require{
  color: red;
  margin: 0 5px;
  font-size: 20px;
  height: 20px;
  vertical-align: middle;
}
.time{
  position: absolute;
  font-size: 12px;
  width: 120px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  left: 220px;
  top: 16px;
  background-color: #fff;
  .icon{
    color: #1890ff;
    margin-right: 5px;
  }
}
@keyframes spin {
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(360deg);
  }
}
</style>
